<script setup lang="ts">
import { ref, onBeforeUnmount, reactive, onMounted,  type Ref } from 'vue';
import { useRouter } from 'vue-router';

import { $t } from '@vben/locales';
import { VbenButton } from '@vben-core/shadcn-ui';

import { useQRCode } from '@vueuse/integrations/useQRCode';

import Title from './auth-title.vue';
import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';

const router = useRouter();


interface Props {
  /**
   * @zh_CN 是否处于加载处理状态
   */
  loading?: boolean;
  /**
   * @zh_CN 登陆路径
   */
  loginPath?: string;

  /**
   * @zh_CN 登陆二维码路径
   */
   qrcodeSrc?: string;
   /**
   * @zh_CN 登录客户端id
   */
   client_id: string;
}

defineOptions({
  name: 'AuthenticationQrCodeLogin',
});

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  loginPath: '/auth/login',
  qrcodeSrc: '',  ///https://imeal.weiyoho.com/assets/qrcode/login.png
  client_id: ""
});

const text = ref('https://www.uctoo.com');

const qrcode = useQRCode(text, {
  errorCorrectionLevel: 'H',
  margin: 4,
});

function goToLogin() {
  router.push(props.loginPath);
}

</script>

<template>
  <div>
    <Title>
      {{ $t('authentication.welcomeBack') }} 📱
      <template #desc>
        <span class="text-muted-foreground">
          {{ $t('authentication.qrcodeSubtitle') }}
        </span>
      </template>
    </Title>

    <div class="flex-col-center mt-6">
      <img :src="qrcodeSrc" alt="qrcode" class="w-1/2" />
      <p class="text-muted-foreground mt-4 text-sm">
        {{ $t('authentication.qrcodePrompt') }}
      </p>
    </div>

    <VbenButton class="mt-4 w-full" variant="outline" @click="goToLogin()">
      {{ $t('common.back') }}
    </VbenButton>
    <div class="mt-4 text-center text-sm">
      {{ $t('authentication.alreadyHaveAccount') }}
      <span
        class="text-primary hover:text-primary-hover cursor-pointer text-sm font-normal"
        @click="goToLogin()"
      >
        {{ $t('authentication.goToLogin') }}
      </span>
    </div>

    <!-- 保持模板部分不变 -->
  </div>
</template>
<style scoped>
/* 样式保持不变 */
.websocket-demo {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #eee;
}

.status {
  margin: 20px 0;
  padding: 10px;
  background-color: #f5f5f5;
}

.message-box {
  margin: 20px 0;
}

.message-box input {
  padding: 8px;
  width: 200px;
  margin-right: 10px;
}

.messages {
  margin-top: 20px;
  text-align: left;
}

ul {
  list-style-type: none;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
}

li {
  padding: 5px;
  border-bottom: 1px solid #eee;
}
</style>
